<template>
	<view class="qiun-columns">
		<view style="font-size: 35rpx; font-weight: 600; height: 70rpx; margin: 15rpx auto; line-height: 70rpx;  width: 80%;">
			<picker @change="bindPickerChange" :value="index" :range="myYears">
				<view class="uni-input">
					当前显示：
					<text style="color: #02C9FC;">{{myYears[index]}}</text>
					年
				</view>
			</picker>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix"
			 @touchend="touchEndMix"></canvas>
		</view>

		<view>
			<view class="title">
				<view style="flex: 5; text-align: center;">月份</view>
				<view style="flex: 5; text-align: center;">新增人数/人</view>
				<view style="flex: 5; text-align: center;">发放总金额/元</view>
			</view>
			<view v-if="listData.length > 0">
				<view v-for="(item,iindex) in listData" :key="iindex" class="list">
					<view style="flex: 5; text-align: center;">{{myYears[index]}}-{{item.mon}}</view>
					<view style="flex: 5; text-align: center;">{{item.additionalPopulation}}</view>
					<view style="flex: 5; text-align: center;">{{item.aggregate}}</view>
				</view>
			</view>
			<view v-else>
				<view style="margin: 50rpx auto; text-align: center; font-size: 50rpx; font-weight: 800; color: #02C9FC;">
					当年暂无补贴记录！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaMix = null;

	export default {
		data() {
			return {
				additionalPopulationList:[] ,
				aggregate:[],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				myYears: [],
				index: 0,
				listData: []
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.load();
			this.getServerData();

			
		},
		methods: {
			getServerData() {
				var testData = {
					"categories": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					"series": [{
						"name": "新增月份总人数",
						"data": this.additionalPopulationList,
						"type": "column",
						index: 1,
						"color": "#FFCF10"
					}, {
						"name": "月份补贴发放总金额",
						"data": this.aggregateList,
						"type": "line",
						"color": "#2fc25b"
					}]
				}
				let Mix = {
					categories: [],
					series: []
				};
				Mix.categories = testData.categories;
				Mix.series = testData.series;
				_self.showMix("canvasMix", Mix);
			},
			showMix(canvasId, chartData) {
				canvaMix = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: true
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 6,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						data: [{
							gridType: 'dash',
							splitNumber: 5,
							position: 'left',
							min: 10,
							max: 180,
							format: (val) => {
								return val.toFixed(0) + '元'
							}
						}, {
							gridType: 'dash',
							splitNumber: 5,
							min: 10,
							max: 180,
							position: 'right',
							format: (val) => {
								return val.toFixed(0) + '人'
							}
						}]
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						tooltip: {
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 8,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						}
					},
				});
			},
			touchMix(e) {
				canvaMix.scrollStart(e);
			},
			moveMix(e) {
				canvaMix.scroll(e);
			},
			touchEndMix(e) {
				canvaMix.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaMix.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			async load() {
				//获取今年年份
				var nowTime = this.toTime(new Date().getTime());
				console.log(nowTime);
				for (var i = nowTime; i >= 1970; i--) {
					this.myYears.push(i)
				}

				await this.getData(nowTime);
				
			},
			async getResData(year){
				var result = (await this.$api.getPlatformSummary({year})).data;

				result.forEach(e=>{
					e.mon = parseInt(e.mon)
					e.aggregate = parseFloat(e.aggregate)
					e.additionalPopulation = parseInt(e.additionalPopulation)
				})
				console.log(result.length)
				return result
			},
			async getData(year){
				//获取年数据
				//request
				
				var res = await this.getResData(year);
				console.log(res)
				this.listData = res
				//生成图标需求数据
				this.additionalPopulationList = [0,0,0,0,0,0,0,0,0,0,0,0]
				this.aggregateList = [0,0,0,0,0,0,0,0,0,0,0,0]
				res.forEach(e=>{
					this.additionalPopulationList[e.mon-1] = e.additionalPopulation;
					this.aggregateList[e.mon-1] = e.aggregate
				})
				console.log(this.additionalPopulationList)
				this.getServerData();
			},
			async bindPickerChange(e) {
				this.index = e.detail.value
				await this.getData(this.myYears[e.detail.value])
			},
			toTime(timestamp) {
				var now = new Date();
				var time = new Date();
				time.setTime(timestamp);
				return time.getFullYear()


			},
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.list {
		border-bottom: 1px solid #CCCCCC;
		width: 100%;
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
	}

	.title {
		/* 		border-bottom: 1px solid #CCCCCC; */
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: 600;
		font-size: 30rpx;
		background-color: #F1F1F1;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
